<template>
  <view class="product-page">
    <!-- 标签页导航 -->
    <view class="tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.key"
        :class="['tab-item', { active: currentTab === tab.key }]"
        @click="handleTabChange(tab.key)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 标签页内容 -->
    <view class="tab-content">
      <!-- 商品列表 -->
      <ProductList v-if="currentTab === 'product'" />
      
      <!-- 分类管理 -->
      <CategoryManage v-if="currentTab === 'category'" />
      
      <!-- 品牌管理 -->
      <BrandManage v-if="currentTab === 'brand'" />
      
      <!-- 属性管理 -->
      <PropertyManage v-if="currentTab === 'property'" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ProductList from './components/ProductList.vue'
import CategoryManage from './components/CategoryManage.vue'
import BrandManage from './components/BrandManage.vue'
import PropertyManage from './components/PropertyManage.vue'

// 标签页配置
const tabs = [
  { key: 'product', name: '商品列表' },
  { key: 'category', name: '分类管理' },
  { key: 'brand', name: '品牌管理' },
  { key: 'property', name: '属性管理' }
]

// 当前选中的标签页
const currentTab = ref('product')

// 切换标签页
const handleTabChange = (tab: string) => {
  currentTab.value = tab
}
</script>

<style lang="scss">
.product-page {
  min-height: 100vh;
  background-color: #f5f7fa;

  .tabs {
    display: flex;
    background-color: #fff;
    padding: 0 20rpx;
    border-bottom: 1px solid #dcdfe6;
    position: sticky;
    top: 0;
    z-index: 100;

    .tab-item {
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #606266;
      position: relative;
      cursor: pointer;

      &.active {
        color: #409eff;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background-color: #409eff;
        }
      }
    }
  }

  .tab-content {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 4rpx;
    min-height: calc(100vh - 120rpx);
  }
}
</style>